<template>
<div>
    <div>
        <van-nav-bar title="回收证件" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="heightF">
        <van-cell-group>

            <!-- <van-card :num="item" :price="item" desc="描述信息" :title="item" thumb="https://img.yzcdn.cn/vant/ipad.jpeg"> -->
            <van-card>
                <template #tags>
                    <van-cell :value=organizationName>
                        <!-- 使用 title 插槽来自定义标题 -->
                        <template #title :value=recordType>
                            <van-tag type="primary" size="large">{{userName}}</van-tag>

                        </template>

                    </van-cell>
                    <van-cell title="状态" :value=recordStatusContent />
                    <van-card>
                        <template #tags>
                            <van-cell>{{passportType}} </van-cell>
                            <van-cell>证件号码 {{assportNumber}}</van-cell>
                            <van-cell>证件状态 </van-cell>
                        </template>

                    </van-card>
                    <!-- <van-cell title="所属部门" :value=organizationName /> -->
                    <van-cell title="开始时间" v-model=planStartTime />
                    <van-cell title="结束时间" :value=planEndTime />
                    <van-cell title="类型" :value=recordType />
                    <van-cell title="途径地" :value=places />
                    <van-field v-model="reson" rows="2" autosize label="备注信息" input-align="right" type="textarea" :placeholder=reson />
                </template>
            </van-card>
            <div>
                <van-cell-group>
                    <van-field name="starttime" v-model="starttime" clearable label="开始时间" input-align="right" placeholder="请输入开始时间" @focus="start" />
                    <!-- 开始时间控件 -->
                    <van-popup v-model="show" position="bottom">
                        <van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="confirm" @cancel="cancel" :formatter="formatter" />
                    </van-popup>
                </van-cell-group>
                <van-cell-group>
                    <van-field name="endtime" v-model="endtime" clearable label="结束时间" input-align="right" placeholder="请输入结束时间" @focus="end" />
                    <!-- 结束时间控件 -->
                    <van-popup v-model="show1" position="bottom">
                        <van-datetime-picker v-model="currentDate1" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="confirm1" @cancel="cancel1" :formatter="formatter" />
                    </van-popup>
                </van-cell-group>
                <van-cell-group>
                    <van-field v-model="passportNumber" type="number" input-align="right" label="证件号码" placeholder="请输入证件号码" />
                </van-cell-group>
                <van-cell-group>
                    <van-field v-model="indexNumber" type="number" input-align="right" label="证件索引" placeholder="请输入证件索引" />
                </van-cell-group>
                <van-cell-group>
                    <div class="group-leader flexbox">
                        <van-field readonly name="isAmOrPm1" clickable label="状态" :value="value1" input-align="right" placeholder="请选择状态" @click="mqinAi1" />
                        <div v-if="myIf1">
                            <van-popup v-model="showPicker" position="bottom">
                                <van-picker title="请选择状态" show-toolbar :columns="columns1" @cancel="showPicker = false" @confirm="onConfirm1" />
                            </van-popup>
                        </div>
                    </div>
                </van-cell-group>
                <van-cell-group>
                    <div class="group-leader flexbox">
                        <van-field readonly name="isAmOrPm2" clickable label="状态" :value="value2" input-align="right" placeholder="请选择状态" @click="mqinAi2" />
                        <div v-if="myIf2">
                            <van-popup v-model="showPicker" position="bottom">
                                <van-picker title="请选择状态" show-toolbar :columns="columns2" @cancel="showPicker = false" @confirm="onConfirm2" />
                            </van-popup>
                        </div>
                    </div>
                </van-cell-group>

            </div>

            <van-card>
                <template #tags>
                    <van-cell>
                        <van-steps direction="vertical" :active='dataLengh'>
                            <van-step v-for="(item,index) in taskData" :key="index">
                                <h4 style='margin-top: 5px; margin-bottom: 5px;' v-if="item.userName">{{item.userName}}</h4>
                                <h4 style='margin-top: 5px; margin-bottom: 5px;' v-if="item.taskName">{{item.taskName}}</h4>
                                <h4 style='margin-top: 5px; margin-bottom: 5px;' v-if="item.createTime">{{getLocalTime(item.createTime)}}</h4>
                                <h4 style='margin-top: 5px; margin-bottom: 5px;' v-if="item.auditResult">{{item.auditResult == 1 ? '同意':'不同意'}}</h4>

                                <!-- <p>2016-07-12 12:40</p> -->
                            </van-step>
                        </van-steps>
                    </van-cell>

                </template>

            </van-card>
        </van-cell-group>
    </div>
    <div>

        <div>
            <van-cell-group>
                <van-col span="12">
                    <van-button type="primary" block @click="save(0)">确认出行并收回证件</van-button>
                </van-col>
                <van-col span="12">
                    <van-button type="warning" block @click="save(1)">未出行收回证件</van-button>
                </van-col>
            </van-cell-group>
            <van-cell-group>
                <van-col span="12">
                    <van-button type="warning" block @click="save(2)"> 未出行并未证 </van-button>
                </van-col>
                <van-col span="12">
                    <van-button type="danger" block @click="save(3)">退回至申请人回执单</van-button>
                </van-col>
            </van-cell-group>
        </div>

    </div>

</div>
</template>

<script>
import {
    Step,
    Steps
} from 'vant';
import Cookies from 'js-cookie'
import request from '@/utils/request'
import {
    Dialog
} from "vant";
import {
    cgjfindOne,
    getTaskAuditList,
    approval
} from "@/api/fy";
import {
    Transformation,
} from '@/api/common'

export default {

    data() {
        return {
            recordType: '',
            planStartTime: '',
            planEndTime: '',
            planSumTime: '',
            planStartDetailTime: '',
            planEndDetailTime: '',
            passportNumber: '',
            indexNumber: '',
            name: '',
            //状态
            recordStatusContent: '',
            taskData: '',
            dataLengh: '',
            tijiao: false,
            chehui: false,
            shanchu: false,
            bianji: false,
            myself: false,
            recordId: '',
            recordtype: '',
            approval: false,
            assportNumber: "",
            passportType: '',
             passportTypeIndex: '',
            myIf1: false,
            myIf2: false,
            myIf3: false,
            tj: true,
            gx: false,
            zc: false,
            reson: "",
            value1: "",
            value2: "",
            value3: "",
            hour: "",
            showPicker: false,
            showPicker1: false,
            showPicker2: false,
            columns1: ["有效", "过期", '遗失'],
            columns2: ["人事处保管", "个人保管"],
            columns3: ["不离开", "离开"],
            show: false, //开始时间弹窗
            show1: false, //结束时间弹窗
            minHour: 10,
            maxHour: 20,
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2021, 12, 31),
            currentDate: new Date(), //开始标准时间
            currentDate1: new Date(), //结束标准时间
            starttime: "", //开始时间
            starttime1: "", //开始时间时间戳
            endtime: "", //结束时间
            endtime1: "", //结束时间时间戳
            status: '',
            belong: ''

        };
    },
    created() {
        this.find();
        this.recordId = this.$route.params.recordId,
            this.recordtype = this.$route.params.recordType,
            this.approval = this.$route.params.approval

        this.organizationName = Cookies.get('organizationName')
        this.userName = Cookies.get('userName')

    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        find() {
            const obj = {
                recordId: this.$route.params.recordId,
                recordType: this.$route.params.recordType
            }
            console.log(obj)
            var userId = Cookies.get("userId");
            cgjfindOne(obj).then(res => {
                var shuju = res.data.record;
                this.recordType = this.Judgmenttype(shuju.applyType)
                this.planStartTime = shuju.planStartTime
                this.planEndTime = shuju.planEndTime
                this.planSumTime = shuju.otHours
                this.places = shuju.places
                this.recordStatusContent = shuju.recordStatusContent
                this.reson = shuju.reason
                this.assportNumber = shuju.passportNumber
                this.passportType = shuju.passportType == 0 ? "普通护照" : "往来港澳通行证或签注"
                this.passportTypeIndex = shuju.passportType 
                
                //如果是自己登陆则请假详情会有草稿提交以及相应功能 如果是上级登陆则没有相应按钮，只能查看详情信息
                if (userId == shuju.userId) {
                    this.myself = true
                }
                //根据请假状态判断是提交还是撤回
                if (shuju.status == "11" || shuju.status == "3" || shuju.status == "1") {
                    this.tijiao = true
                    this.shanchu = true
                    this.bianji = true
                } else if (shuju.status == "2") {
                    this.chehui = true
                }
            })
            var id = {
                recordId: this.$route.params.recordId
            }
            getTaskAuditList(id).then(res => {
                console.log(res.data, 'task')
                this.taskData = res.data;
                this.dataLengh = res.data.length - 1

                // if (res.data.length == 2) {
                //     this.i = 1
                //     this.i1 = 1
                // } else if (this.dataLengh == 3) {
                //     this.i1 = 2
                //     document.getElementById("three").style.cssText = 'display:block'
                // }
            })
        },
        Judgmenttype(type) {
            if (type == 0) {
                return '出境旅游'
            } else if (type == 1) {
                return '出境探亲'
            } else if (type == 2) {
                return '出国旅游'
            } else if (type == 3) {
                return '出国探亲'
            }
        },
        getLocalTime(time) {
            var date = new Date(time); //获取一个时间对象
            var day = date.getFullYear() + '年' + date.getMonth() + 1 + '月' + date.getDate() + '日' + date.getHours() + '时' + date.getMinutes() + '分'
            return day;
        },
        save(type) {
            var isAgree
            if(type==3){
                isAgree=0
            }else{
                isAgree=1
            }
            var tijiaodata = {
                recordId: this.$route.params.recordId,
                receiptAuditType: type,
                isAgree: isAgree,
                startTime: this.starttime,
                endTime: this.endtime,
                passportNumber: this.passportNumber,
                indexNumber: this.indexNumber,
                status: this.status,
                belong: this.belong,
                passportType: this.passportTypeIndex,
                userName: Cookies.get('userName'),
                userId: Cookies.get("userId")
            }
            this.$axios({
                method: 'post',
                url: 'abroadAudit/receiptPassport',
                data: this.zhuanfunction(tijiaodata)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }

            })

        },

        ok() {
            var data = {
                recordId: this.$route.params.recordId,
                isAgree: 1,
                remarks: '同意'
            }

            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'abroadAudit/abroadAudit',
                data: this.zhuanfunction(data)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: res.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                } else {
                    Dialog.alert({
                        title: "错误",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }
            })

        },
        ontOk() {
            var data = {
                recordId: this.$route.params.recordId,
                isAgree: 0,
                remarks: '不同意'
            }
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'abroadAudit/abroadAudit',
                data: this.zhuanfunction(data)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: res.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                } else {
                    Dialog.alert({
                        title: "",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }
            })

        },

        zhuanfunction(data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            return ret;
        },
        ch() {
            var data = {
                recordId: this.$route.params.recordId,
                recordType: this.$route.params.recordType,
            }
            const that = this;
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'leaveApply/cancel',
                data: this.zhuanfunction(data)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }
            })

        },
        sc() {
            var data = {
                recordId: this.$route.params.recordId,
                recordType: this.$route.params.recordType,
            }
            const that = this;
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'leaveApply/delete',
                data: this.zhuanfunction(data)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }
            })

        },
        bj(recordId, recordType) {

            this.$router.push({
                name: 'xjjb',
                params: {
                    recordId: recordId,
                    recordType: recordType
                }
            })
        },
        onConfirm1(e, index) {
            this.value1 = e;
            this.status = index
            this.showPicker = false;
        },
        onConfirm2(e, index) {
            this.belong = index
            this.value2 = e;
            this.showPicker = false;
            this.getDay();
        },
        onConfirm3(e) {
            this.value3 = e;
            this.showPicker = false;
        },
        mqinAi1() {
            this.myIf1 = true;
            this.myIf2 = false;
            this.myIf3 = false;
            this.myIf4 = false;
            this.myIf5 = false;
            this.showPicker = true;
        },
        mqinAi2() {
            this.myIf1 = false;
            this.myIf2 = true;
            this.myIf3 = false;
            this.myIf4 = false;
            this.myIf5 = false;
            this.showPicker = true;
        },
        mqinAi3() {
            this.myIf1 = false;
            this.myIf2 = false;
            this.myIf3 = true;
            this.myIf4 = false;
            this.myIf5 = false;
            this.showPicker = true;
        },
        onSubmit(values) {
            console.log("submit", values);
        },
        start() {
            this.show = true;
        },
        // 选择结束时间
        end() {
            this.show1 = true;
        },
        // 点击确定
        confirm() {
            this.show = false;
            this.starttime =
                this.currentDate.getFullYear() +
                "-" +
                (Number(this.currentDate.getMonth()) + 1) +
                "-" +
                this.currentDate.getDate() +
                " " +
                this.currentDate.getHours() +
                ":" +
                this.currentDate.getMinutes();
            this.starttime1 = new Date(this.currentDate).getTime() / 1000;
        },
        // 点击取消
        cancel() {
            this.show = false;
        },
        confirm1() {
            this.show1 = false;
            this.endtime =
                this.currentDate1.getFullYear() +
                "-" +
                (Number(this.currentDate1.getMonth()) + 1) +
                "-" +
                this.currentDate1.getDate() +
                " " +
                this.currentDate1.getHours() +
                ":" +
                this.currentDate1.getMinutes();
            this.endtime1 = new Date(this.currentDate1).getTime() / 1000;
        },
        cancel1() {
            this.show1 = false;
        },
        // 处理控件显示的时间格式
        formatter(type, value) {
            // 格式化选择器日期
            if (type === "year") {
                return `${value}年`;
            } else if (type === "month") {
                return `${value}月`;
            } else if (type === "day") {
                return `${value}日`;
            } else if (type === "hour") {
                return `${value}时`;
            } else if (type === "minute") {
                return `${value}分`;
            }
            return value;
        }

    },

}
</script>

<style scoped>
.heightF{
    height: calc(100vh - 133px);
    overflow-y: scroll;
}
</style >
